import { FlatList, Image, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

type Employee = {
  id: string;
  name: string;
  imei: string;
  avatar?: string;
  heartRate?: number;
  spo2?: number;
  workHours?: number;
};

const employees: Employee[] = [
  {
    id: "1",
    name: "张三",
    imei: "863123456789",
    avatar: "https://i.pravatar.cc/100?img=1",
    heartRate: 78,
    spo2: 98,
    workHours: 6.5,
  },
  {
    id: "2",
    name: "李四",
    imei: "863987654321",
    avatar: "https://i.pravatar.cc/100?img=2",
    heartRate: 102,
    spo2: 92,
    workHours: 4.2,
  },
];

function EmployeeItem({ item }: { item: Employee }) {
  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 12,
        paddingHorizontal: 16,
        backgroundColor: "#fff",
        borderRadius: 12,
        marginBottom: 12,
        shadowColor: "#000",
        shadowOpacity: 0.05,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 4,
        elevation: 2,
      }}
    >
      {/* 左侧头像 */}
      <Image
        source={{ uri: item.avatar || "https://placehold.co/60x60" }}
        style={{ width: 48, height: 48, borderRadius: 24, marginRight: 12 }}
      />

      {/* 中间信息 */}
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 16, fontWeight: "600" }}>{item.name}</Text>
        <Text style={{ fontSize: 12, color: "#6B7280" }}>IMEI: {item.imei}</Text>
        <Text style={{ fontSize: 12, color: "#6B7280", marginTop: 2 }}>
          工作时长: {item.workHours?.toFixed(1) || 0} 小时
        </Text>
      </View>

      {/* 右侧状态 */}
      <View style={{ alignItems: "flex-end" }}>
        <Text
          style={{
            fontSize: 14,
            fontWeight: "600",
            color: item.heartRate && item.heartRate > 100 ? "red" : "green",
          }}
        >
          ♥ {item.heartRate ?? "--"} bpm
        </Text>
        <Text
          style={{
            fontSize: 14,
            color: item.spo2 && item.spo2 < 95 ? "orange" : "#374151",
          }}
        >
          SpO₂ {item.spo2 ?? "--"}%
        </Text>
      </View>
    </View>
  );
}

export default function EmployeeList() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#F3F4F6", padding: 16 }}>
      <FlatList
        data={employees}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <EmployeeItem item={item} />}
        contentContainerStyle={{ paddingBottom: 20 }}
      />
    </SafeAreaView>
  );
}
